﻿@using Orchard.Media.Services
@model Amba.ImageMultiPicker.ViewModels.Admin.MediaFolderEditViewModel
@{
    Style.Require("jQueryUI_Orchard").AtHead();
    Script.Require("jQueryUI_Tabs").AtHead();

    SetMeta("X-UA-Compatible", "IE=edge,chrome=1");

    Style.Include("~/themes/theadmin/styles/site.css");
    Style.Include("~/themes/theadmin/styles/ie.css").UseCondition("lte IE 8").SetAttribute("media", "screen, projection");
    Style.Include("~/themes/theadmin/styles/ie6.css").UseCondition("lte IE 6").SetAttribute("media", "screen, projection");
    Style.Include("MultiPicker.css").AtFoot();
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@T("Image multipicker")</title>
    @Display.Metas()
    @Display.HeadScripts()
    @Display.HeadLinks()
    @Display.StyleSheetLinks()
</head>
    <body id="multipicker">
        <div class="top-buttons">
        </div>
        <div class="picker-content-box">
            @if (Model.IsFolderNotExists)
            {
                <div>@T("Folder does not exists")</div>
            }
            else 
            {
                <div class="breadcrumb-box">
                    <a href="@Model.GetPickerUrl("")">@T("Media Folder")</a> >>
                    @foreach(var breadcrumbItem in Model.BreadCrumbs)
                    {
                        <a href="@Model.GetPickerUrl(@breadcrumbItem.MediaPath)">
                            @breadcrumbItem.FolderName
                        </a>
                        if (Model.BreadCrumbs.Last() != breadcrumbItem)
                        {
                            <text>>></text>
                        }
                    }
                </div>
                <form>
                    <table class="file-browser">
                        @foreach (var folder in Model.MediaFolders)
                        {
                            <tr class="folder-row">
                                <td colspan="3">
                                    <a href="@Model.GetPickerUrl(folder.MediaPath)">
                                        <span class="folder-icon"></span>
                                        <b>@folder.Name</b>
                                    </a>
                                </td>
                            </tr>
                        }
                        @foreach (var file in Model.MediaFiles)
                        {
                            <tr>
                                <td>
                                    <input type="checkbox" class="file-picker-checkbox" value="@(file.PublicUrl)" name="selected"/>
                                </td>
                                <td>
                                    <a href="@file.PublicUrl" target="_blank">
                                        <img src="/Amba.ImageMultiPicker/resize@(file.PublicUrl)?width=100"/>
                                    </a>
                                </td>
                                <td>
                                    <div>
                                        <a href="@file.PublicUrl" target="_blank">
                                            @file.MediaFile.Name 
                                        </a>
                                    </div>
                                    <div>
                                        @file.Width x @file.Height
                                    </div>
                                </td>
                            </tr>        
                        }
                    </table>
                </form>
            }
        </div>
                
        @Display.FootScripts()
        <script type="text/javascript">
            $().ready(function () {
                var selected = window.opener.@(Model.Scope).selected();
                $(".file-picker-checkbox").each(function(i, el){
                    var $el = $(el);
                    var val = $el.val();
                    if ($.inArray(val, selected) >= 0)
                    {
                        $el.attr("checked", "checked");
                    }
                });


                $(".file-picker-checkbox").change(function() {
                    var isCheckd = $(this).is(":checked");
                    var fileName = $(this).val();
                    
                    if (isCheckd) {
                        window.opener.@(Model.Scope).add(fileName);
                    } else {
                        window.opener.@(Model.Scope).remove(fileName);
                    }
                });
            });
        </script>
    </body>
</html>
